<template>
    <div>
        <Card>
            <p slot="title">
                添加订单
            </p>
            <div>
                <Form class="step-form" ref="orderData" :model="orderData"  :label-width="100">
                    <Row span="12">
                        <i-col span="6">
                            <FormItem  label="企业选择：" label-position="left" :label-width="150">
                                <Select style="width:200px"  label-in-value >
                                    <Option @click.native="setSourceParty(item)" v-for="(item,index) in partys" :value="item.id" :key="index" :label="item.name">{{ item.name }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <!--<i-col span="12" >
                            <FormItem label="车源选择：" prop="version_name" label-position="left" :label-width="150">
                                <Select
                                    v-model="model13"
                                    filterable
                                    remote
                                    label-in-value
                                    :remote-method="remoteMethod1"
                                    :loading="loading1"
                                    @on-change="selectCarSource">
                                    <Option v-for="(option, index) in options1" :data="option.data" :value="option.value" :key="index">{{option.label}}</Option>
                                </Select>
                            </FormItem>
                        </i-col>-->
                        <i-col span="12" >
                            <FormItem label="车源选择：" prop="version_name" label-position="left" :label-width="150">
                                <Select
                                    filterable
                                    label-in-value
                                    @on-change="selectCarSource">
                                    <Option v-for="(option, index) in options1" :data="option.data" :value="option.value" :key="index">{{option.label}}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="已选车源："  label-position="left" :label-width="150">
                                <Input :disabled="true" v-model="orderData.source_model" type="text"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="意向金："  label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="orderData.intention_money" type="text" placeholder="请输入意向金" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="尾款金额："  label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="orderData.tail_money" type="text" placeholder="请输入尾款金额（单位：元）" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="6">
                            <FormItem  label="企业选择：" label-position="left" :label-width="150">
                                <Select style="width:200px"  label-in-value v-model="orderData.party_id">
                                    <Option @click.native="setPartyUser(item)" v-for="(item,index) in partys" :value="item.id" :key="index" :label="item.name">{{ item.name }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="6" >
                            <FormItem  label="人员选择："  label-position="left" :label-width="150">
                                <Select clearable style="width:200px" v-model="orderData.user_id">
                                    <Option @click.native="carOfferUser(item)" v-for="(item,index) in users" :value="item.id" :key="index" :label="item.realName">{{ item.realName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="6" >
                            <FormItem prop="" label="上牌地-省：" label-position="left" :label-width="150">
                                <Select style="width:150px" label-in-value v-model="orderData.province">
                                    <Option @click.native="setArea(item)" v-for="(item,index) in areaList" :value="item.cityName" :key="index" :label="item.cityName">{{ item.cityName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="6" >
                            <FormItem prop="" label="上牌地-市：" label-position="left" :label-width="150">
                                <Select clearable style="width:150px" v-model="orderData.city" >
                                    <Option v-for="(item,index) in areaCityList" :value="item.cityName" :key="index" :label="item.cityName">{{ item.cityName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="外观颜色："  label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="orderData.out_color" type="text" placeholder="请输入外观颜色" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="内饰颜色："  label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="orderData.in_color" type="text" placeholder="请输入内饰颜色" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="是否验车：" prop="" label-position="left" :label-width="150">
                               <Radio-group v-model="orderData.is_check">
                                    <Radio :label="0">否</Radio>
                                    <Radio :label="1">是</Radio>
                                </Radio-group>
                            </FormItem>
                        </i-col>
                    </Row>

                    <FormItem >
                        <Button :disabled="hasSubmit" @click="saveData" style="width:100px;" type="primary">提交</Button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <Button :disabled="hasSubmit" @click="goBack" style="width:100px;" >返回</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
    </div>
</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'addUser',
    data () {
        return {
            model13: '',
            loading1: false,
            options2: [],
            options1:[],
            partys:[],            // 企业的集合
            users:[],             // 手机端用户的集合
            areaList:[],          // 省的集合
            areaCityList:[],      // 市的集合
            partyName:'',         // 车源企业选择
            orderId:'',           // 订单的id
            party_user_id:'',     // 企业人员id
            orderData:{
                id:'',
                source_id:'',
                user_id:'',
                party_id:'',
                intention_money:'',// 意向金
                tail_money:0,      // 尾款金额
                price:'',
                province:'',
                city:'',
                out_color:'',      // 外观颜色
                in_color:'',       // 内饰颜色
                is_check:0         // 是否验车
            },
            testModelShow:false,
            userId:'',             // 用户的id
            hasSubmit: false
        }
    },
    created () {
        this.init()
    },
    activated () {
        //this.init()
    },
    methods: {
        // 数据初始化
        init () {
            this.userId = window.localStorage.getItem('userId')
            this.$store.commit('setActiveName', 'orderv2index')
            var orderId = this.$route.params.id
            this.orderData.id = orderId
            this.initData(orderId)
        },
        // 企业选择
        setSourceParty(item){
            this.partyName = item.name
            this.getCarSource()

        },
        // 企业数据
        getCarSource(){
            debugger
            let that = this
            let url = 'adminlogin/v2/carorder/selectInfosByModel'
            let data = {
                searchInfo:'',
                partyName:that.partyName
            }
            ajax.formRes(url, data).then(res => {
                debugger
                if (200 == res.code) {
                    const list = res.carSources.map(item => {
                        return {
                            value: item.id,
                            label: item.model,
                            data: item.price
                        };
                    });
                    that.options1 = list
                } else {
                     hat.$Message.success('数据原因，请联系管理员。');
                }
            }).catch(res => {
                console.log('有错误信息')
            })
        },
        // 车源选择
        selectCarSource(item){
            let that = this
            that.orderData.source_id = item.value
            //设置金额数量
            that.options1.forEach(item => {
                if (that.orderData.source_id === item.value) {
                    that.orderData.price = item.data
                }
            })
        },
        // 车源选择
        remoteMethod1 (query) {
            let that = this
            if (query !== '') {
                this.loading1 = true;
                setTimeout(() => {
                    this.loading1 = false;
                    let url = 'adminlogin/v2/carorder/selectInfosByModel'
                    let data = {
                        searchInfo:query,
                        partyName:that.partyName
                    }
                    ajax.formRes(url, data).then(res => {
                       if (200 == res.code) {
                            const list = res.carSources.map(item => {
                                return {
                                    value: item.id,
                                    label: item.model,
                                    data: item.price
                                };
                            });
                            that.options1 = list
                        } else {
                            that.$Message.success('数据原因，请联系管理员。');
                        }
                    }).catch(res => {
                        console.log('有错误信息')
                    })
                }, 200);
            } else {
                this.options1 = [];
            }
        },
        //默认加载数据
        initData(orderId){
            let that = this
            let url = 'adminlogin/v2/carorder/getInfoById'
            let data = {
                orderId:orderId
            }
            ajax.formRes(url, data).then(res => {
               if (200 == res.code) {
                    that.orderData = res.order
                    that.partys = res.partys
                    let partyList = res.partys
                    that.areaList = res.area
                    let provinceList = res.area
                    partyList.forEach(function (item,index) {
                        if(item.id === that.orderData.party_id){
                            that.users = item.users
                        }
                    })
                    provinceList.forEach(function(item,index){
                        if(item.cityName === that.orderData.province){
                            that.areaCityList = item.citys
                        }
                    })

                } else {
                    that.$Message.success('数据原因，请联系管理员。');
                }
            }).catch(res => {
                console.log('有错误信息')
            })
        },
        // 企业选择
        setPartyUser(obj){
            this.users = obj.users;
        },
        //发布报价设置
        carOfferUser(obj){
            this.orderData.user_id = obj.id
        },
        // 上地牌
        setArea(obj){
            this.orderData.province = obj.cityName
            this.areaCityList = obj.citys;
        },
        // 添加数据
        saveData () {
            let that = this
            that.$refs['orderData'].validate((valid) => {
                if (valid) {
                    that.hasSubmit = true
                    let url = 'adminlogin/v2/carorder/updateInfo'
                    let data = that.orderData
                    ajax.formRes(url, data).then(res => {
                        // success
                        that.$Message.success('新增数据成功,页面正在跳转')
                        that.hasSubmit = false
                            let argu = {
                            }
                            that.$router.push({
                                name: 'orderv2index',
                                params: argu
                            })
                    }).catch(err => {
                        console.log('有错误信息')
                        // fail
                    })
                } else {
                    console.log('新增失败。。。')
                }
            })
        },
        // 返回列表
        goBack () {
            this.$router.push({
                name: 'appversionindex'
            })
        }
    },

}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>

